<template>
  <div style="background-color: #F1F1F1;width: 100%;height: 100%" >

    <div style=" float: left;margin-top: 20px; display: flex;padding: 0px 20px;border-bottom: 1px solid #0270C1;background-color: white;width: 95%;margin-left: 14px">
      <div>
        <svg t="1665216175845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6359" width="32" height="32"><path d="M942.112 606.08L528 360.16 84.608 623.424C81.6 607.616 80 591.424 80 575.04V64a64 64 0 0 1 64-64h736a64 64 0 0 1 64 64v511.04c0 10.432-0.64 20.8-1.888 31.04z m-30.464 93.536a255.872 255.872 0 0 1-71.264 81.152L512 1024 183.616 780.768A255.84 255.84 0 0 1 120.736 713.6L528 471.808l383.648 227.808z" fill="#39A2FF" p-id="6360"></path><path d="M911.648 699.616a255.872 255.872 0 0 1-71.264 81.152L512 1024 183.616 780.768A255.84 255.84 0 0 1 120.736 713.6L528 471.808l383.648 227.808z" fill="#85D8FF" p-id="6361"></path></svg>      </div>

      <div style="text-align: center;line-height: 40px;">五险一金比例：</div>

      <div></div>
    </div>

    <el-table :data="tableData" stripe  :header-cell-style="{background:'#eef1f6',color:'#606266'}"  :cell-style="{'text-align':'center'}" style="margin-top: 20px;width:98%;margin-left: 15px;float: left;margin-top: 20px" >
      <el-table-column align='center' prop="fxName"  label="缴费类别"  />
      <el-table-column align='center' prop="fxCmopare"  label="个人缴纳"  >
        <template #default="s">
          {{bai1(s.row.fxCmopare)}}
        </template>
      </el-table-column>
      <el-table-column align='center' prop="fxGonsicmopare"  label="公司缴纳"  >
        <template #default="s">
          {{bai1(s.row.fxGonsicmopare)}}
        </template>
      </el-table-column>




    </el-table>




  </div>

</template >

<script  lang="ts" setup>


import {onBeforeMount, ref} from "vue";
import axios from "axios";

const tableData = ref([]);

//页面加载之前事件
onBeforeMount(()=>{
      getMenu();
})
const getMenu=()=>{
  axios.get("/logisticsOa/FiveShow/ShowFive").then(res=>{
    console.log(res.data.data)
    tableData.value= res.data.data
  })
}

const bai1= (s)=>{
  let data1 = (s*100).toFixed(0)+"%"
  return data1
}

</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 98%;
  margin-left: 15px;
  height: 100px;
}

</style>